<template>
  <div class="main mainBox">
    <el-row :gutter="24" style="padding: 0 12px">
      <el-col :span="24">
        <TitleBox />
      </el-col>
      <el-col :span="24">
        <el-divider></el-divider>
        <h4>待办工作展示</h4>
        <el-divider></el-divider>
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>近30天回款超期&nbsp;(4)&nbsp;个</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >更多</el-button
              >
            </div>
            <div class="text items">
              <p>合同签订对象: <span>中国移动</span></p>
              <p>预计时间: <span>2023-07-10</span></p>
              <p>款项类型: <span>预付款</span></p>
              <p>超期天数: <span>2天</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>近30天超期预警&nbsp;(小于7天)&nbsp;(12)&nbsp;个</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >更多</el-button
              >
            </div>
            <div class="text items">
              <p>客户: <span>大连沙河口昭鹤口腔诊所</span></p>
              <p>预计回款时间: <span>2023-07-10~2023-07-20</span></p>
              <p>还剩余: <span>2天</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>本月合同总额&本月回款总额</span>
            </div>
            <div class="text items bodys">
              <div class="itemTitle">
                <p>本月合同总额</p>
                <h4>11个&nbsp;总额1285.62万元</h4>
              </div>
              <div class="itemTitle">
                <p>本月回款总额</p>
                <h4>13笔 &nbsp;总额XXXXX万元</h4>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-divider></el-divider>
      </el-col>
      <!-- 图表 -->
      <el-col :span="24" style="padding: 0 10px; background: white">
        <el-col :span="15">
          <el-radio-group
            v-model="radioValue"
            size="small"
            @input="setOptionss"
          >
            <el-radio-button plain label="本月新增合同"></el-radio-button>
            <el-radio-button plain label="各大区销售总额"></el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="9">
          <div style="display: flex; float: right">
            <el-button
              type="text"
              @click="setBtn(0)"
              :class="btnShow.show1 ? '' : 'btnStyle'"
              >本季度</el-button
            >
            <el-button
              type="text"
              @click="setBtn(1)"
              :class="btnShow.show2 ? '' : 'btnStyle'"
              >本月</el-button
            >
            <el-button
              type="text"
              @click="setBtn(2)"
              :class="btnShow.show3 ? '' : 'btnStyle'"
              >上月</el-button
            >
            <el-date-picker
              v-model="dataArr"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="margin-left: 8px"
            >
            </el-date-picker>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <ContractChart ref="ContractCharts" />
  </div>
</template>
<script>
import ContractChart from "./charts/contractCharts.vue";
import TitleBox from "./title";

export default {
  name: "analysis_sets",
  components: {
    ContractChart,
    TitleBox,
  },
  data() {
    return {
      radioValue: "本月新增合同",
      dataArr: [],
      btnShow: {
        shwo1: false,
        shwo2: true,
        shwo3: false,
      },
    };
  },
  methods: {
    setOptionss(e) {
      if (e == "本月新增合同") {
        let data = {
          color: ["#1890ff"],
          title: {
            text: "单位(份)",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"],
              },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["近30天新增合同"],
            // 各大区回款总额
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                "东北大区",
                "西南大区",
                "华北大区",
                "西北大区",
                "华南大区",
                "华中大区",
              ],
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "近30天新增合同",
              type: "bar",
              data: [3, 5, 9, 1, 0, 12],
              barWidth: 80,
            },
          ],
        };
        this.$nextTick(() => {
          this.$refs.ContractCharts.init(data);
        });
      } else if (e == "各大区销售总额") {
        let data = {
          color: ["#1890ff"],
          title: {
            text: "单位(万元)",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"],
              },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["各大区回款总额"],
            // 各大区回款总额
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                "东北大区",
                "西南大区",
                "华北大区",
                "西北大区",
                "华南大区",
                "华中大区",
              ],
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "各大区回款总额",
              type: "bar",
              data: [660, 72, 30, 15, 18, 780],
              barWidth: 80,
            },
          ],
        };
        this.$nextTick(() => {
          this.$refs.ContractCharts.init(data);
        });
      }
    },
    setBtn(e) {
      console.log(e);
      this.btnShow = {
        shwo1: false,
        shwo2: false,
        shwo3: false,
      };
      this.btnShow[e] = true;
    },
  },
};
</script>
<style scoped lang="scss">
.mainBox {
  background: white;
  .el-divider--horizontal {
    margin: 12px 0;
  }
}
.btnStyle {
  color: #5b5959;
}
.items {
  height: 80px;
  max-height: 120px;
  font-size: 14px;
  p {
    margin-top: 3px;
    span {
      color: #515050;
    }
  }

  .itemTitle {
    p {
      color: #6b6a6a;
      font-size: 14px;
      margin-bottom: 6px;
    }
  }
}
.bodys {
  >>> .el-card__body {
    height: 80px;
    max-height: 120px;
  }
}
</style>
